<template>
  <div>
      <el-form :inline="true" :model="data" size="small" class="filter-form">
        <el-form-item label="支付号">
          <el-input v-model="data.outTradeNo" placeholder="请输入" style="width: 170px;" />
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="data.uuid" placeholder="请输入" style="width: 170px;" />
        </el-form-item>
        <el-form-item label="套系名称">
          <el-input v-model="data.name" placeholder="请输入" style="width: 170px;" />
        </el-form-item>
        
        <el-form-item label="归属地">
          <el-select
            v-model="data.ownType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 170px;"
          >
            <el-option v-for="dict in dict.type.template_own_type" 
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="data.catType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 170px;"
          >
            <el-option v-for="dict in dict.type.template_cat_type" 
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="商铺">
          <el-select
            v-model="data.merchant"
            clearable
            filterable
            placeholder="请选择"
            style="width: 170px;"
          >
            <el-option v-for="dict in dict.type.merchant" 
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="人群">
          <el-select
            v-model="data.userType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 170px;"
          >
            <el-option v-for="dict in dict.type.template_user_type" 
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="data.status" clearable filterable placeholder="请选择" style="width: 170px;">
            <el-option label="已付款" :value="1" />
            <el-option label="制作中" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="制作失败" :value="4" />
            <el-option label="已退款" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间">
          <el-date-picker
            v-model="data.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
            style="width: 280px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
export default {
  dicts: ['template_cat_type', 'template_own_type', 'template_user_type', 'merchant'],
  props: {
    data: {
      type: Object,
      default() {
        return {
          outTradeNo: null,
          name: null,
          status: null,
          ownType: null,
          catType: null,
          userType: null,
          merchant: null,
          timeRange: [],
          uuid: null
        }
      }
    }
  },
  methods: {
    onSubmit() {
      this.$emit('search')
    },
  },
};
</script>

<style lang="sass" scoped>
</style>